<template>
	<div class="login-container">
		<video class="video" muted src="../../assets/video/bg-video.mp4" loop="loop" autoplay="true"></video>
		<div class="bg2"></div>
		<!-- 常规登入 -->
		<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
			class="login-loginForm">
			<h1 class="title">crm系统</h1>
			<!-- 一开始是二维码角标,点击之后变成电脑角标,再次点击又切换 -->
			<i @click="changeLoginType" :class="['jiaobiao', 'iconfont', jiaobiaoType]"></i>
			<!-- 常规登入 -->
			<CommonLogin v-if="loginType === 'common'" ref="commonLogin" @syncLoginForm="handleSyncLoginForm"
				@changeSmsType="changeSmsType" @submit="submit" />

			<!-- 二维码登入 -->
			<QrLogin :storageUserInfo="storageUserInfo" v-else-if="loginType === 'qrcode'" />

			<!-- 手机验证码登入 -->
			<SmsLogin :storageUserInfo="storageUserInfo" v-else />

		</el-form>
	</div>
</template>

<script>
import CommonLogin from '@/components/Login/commonLogin.vue';
import QrLogin from '@/components/Login/qrLogin.vue';
import SmsLogin from '@/components/Login/smsLogin.vue';
import * as api from "@/api/users"
import storage from "@/utils/storage"
var validateCaptcha = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	if (value.length !== 5) {
		callback("验证码必须是5位");
	} else {
		callback();
	}
};
var validateUsername = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	var reg = /^\w{3,16}$/;

	if (reg.test(value)) {
		//验证通过
		callback();
	} else {
		callback("用户名可以是字母数字下划线,3-16位");
	}
};
var validatePass = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	if (value.length < 3) {
		callback("密码长度不能小于3位");
	} else {
		callback();
	}
};
export default {
	data() {
		return {
			//common常规登入 | qrcode二维码 | sms:短信验证码
			loginType: 'common',//登入方式
			loginForm: {
				username: "",
				password: "",
				captcha: ""
			},
			rules: {
				//表单验证规则
				username: [{ validator: validateUsername, trigger: "blur" }],
				password: [{ validator: validatePass, trigger: "blur" }],
				captcha: [{ validator: validateCaptcha, trigger: "blur" }],
			}
		};
	},
	components: { CommonLogin, QrLogin, SmsLogin },
	//计算属性
	computed: {
		jiaobiaoType() {
			if (this.loginType === "common") {
				return 'icon-erweimajiaobiao'
			}
			if (this.loginType === "qrcode" || this.loginType === "sms") {
				return 'icon-diannaojiaobiao'
			}

		}
	},
	methods: {
		//更改成短信登入
		changeSmsType() {
			this.loginType = 'sms'
		},
		//更改登入方式
		changeLoginType() {
			// console.log(123)
			if (this.loginType === "common") {
				this.loginType = 'qrcode'
			} else if (this.loginType === "qrcode") {
				this.loginType = 'common'
			} else if (this.loginType === 'sms') {
				this.loginType = 'common'
			}
		},
		handleSyncLoginForm(newLoginForm) {
			// console.log(newLoginForm)
			this.loginForm = newLoginForm
		},
		//表单提交
		submit() {
			this.$refs['loginForm'].validate((valid) => {
				if (valid) {
					//登入
					//1.获取后台的验证码
					//2.进行本地校验
					//3.本地校验通过=>先校验验证码
					//4.验证码通过再校验用户名和密码
					//5.成功和失败
					//本地校验通过
					// alert('submit!');
					api.verifyCaptcha(this.loginForm.captcha)
						.then(async res => {
							if (res.data.state) {
								//验证码通过,校验用户名和密码
								let { username, password } = this.loginForm
								let res = await api.loginApi(username, password)
								//登入成功
								if (res.data.state) {
									//存储用户信息到本地
									this.storageUserInfo(res.data)
									//跳转到主页
									this.$router.push("/")
								}
							} else {
								// 验证码不通过 刷新验证码
								this.$refs['commonLogin'].getCaptcha()
							}
						})

				} else {
					// 本地校验不通过
					// console.log('error submit!!');
					return false;
				}
			});
		},
		//封装一个方法,用于存储用户的信息和token
		storageUserInfo({ userInfo, token, permission }) {
			// 将信息存到vuex
			this.$store.commit('users/SET_USERINFO', userInfo)
			storage.set('userInfo', userInfo)
			storage.set('qf-token', token)
			storage.set('permission', permission)
		}
	}
}
</script>

<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
	width: 25px !important;
	height: 25px !important;
	vertical-align: -7px;
	margin-right: 3px;
}

.login-container {
	text-align: center;
	color: #fff;

	.common-login {
		padding-right: 50px;
	}

	//二维码样式
	.erwei .img {
		display: inline-block;
		position: relative;
		width: 200px;
		height: 200px;

		img {
			position: absolute;
			left: 0;
		}

		.mask {
			width: 100%;
			height: 100%;
			opacity: 0.8;
			background-color: #fff;
			position: absolute;
			left: 0;
			// background-image: url("../../assets/img/scancode.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
		}
	}

	.jiaobiao {
		font-size: 60px;
		color: #fff;
		position: absolute;
		right: -1px;
		top: -1px;
		cursor: pointer;
		opacity: 0.7;
	}

	.video {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bg2 {
		background-image: url("../../assets/img/bg2.png");
		background-repeat: no-repeat;
		position: fixed;
		width: 20%;
		height: 40%;
		background-size: 100% 100%;
		left: 20%;
		top: 40%;
		opacity: 0.5;
	}

	.el-form {
		position: fixed;
		right: 10%;
		top: 25%;
		border-radius: 5px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 100px 0 50px 0;

		/deep/ .el-input__inner {
			width: 250px;
		}

		/deep/ .el-button--primary {
			background: linear-gradient(90deg, #1596fb, #002dff);
			width: 250px;
		}

		/deep/ .el-form-item__label {
			color: #fff;
		}

		.title {
			margin: 0 0 60px 0;
			text-align: center;
			color: #fff;
		}

		/deep/ .captcha {
			width: 100px;
			vertical-align: top;

			.el-input__inner {
				width: 100%;
				height: 45px;
				border-radius: 5px 0 0 5px;
				border: 0;
				font-size: 18px;
			}
		}

		svg path {
			stroke: red;
		}

		.captcha-svg {
			background: #fff;
			display: inline-block;
			height: 45px;
			width: 150px;
			text-align: center;
			cursor: pointer;
			border: 0;
			border-radius: 0px 5px 5px 0;
		}

		.el-form-item__content {
			margin-left: 30px !important;
			width: 250px !important;
		}
	}
}

.sms {
	margin-left: -15px !important;
	width: 250px !important;
}

.smsContainer {
	padding-right: 20px !important;
	width: 89%;

	/deep/ .el-form-item__label {
		// margin-left: 80px !important
		padding: 0 !important;
		padding-right: 10px !important;
	}

	/deep/ .phone {
		width: 140px !important;
	}

	/deep/ .captcha-svg {
		width: 115px !important;
	}

	/deep/ .el-form-item__content {
		margin: 0;
	}
}

// .smsContainer{
// 	width:300px;
// }
</style>